<!DOCTYPE html>
<html>
<head>
    <meta name="layout" content="main"/>
    <g:set var="entityName" value="${message(code: 'contact.label', default: 'Contact')}"/>
    <title>个人拓扑关系图</title>
    <style>
    .table>tbody>tr>td{
        vertical-align: middle;
    }
    @media screen and (min-width:1900px) and (max-width:1920px) {
        .flex{
            display: flex;justify-content: center;align-items: center;
        }
    }
    .select2-container .select2-choices .select2-search-field input,.select2-container .select2-choice,.select2-container .select2-choices{
        color: #999;
    }
    .allInputRadio{
        width: 108px;
        float: left;
        margin-top: 5px;
    }
    </style>
</head>

<body class="fixed-navbar fixed-sidebar">

<div class="small-header">
    <div class="hpanel">
        <div class="panel-body">
            <div id="hbreadcrumb" class="pull-right navFloatRight">
                <ol class="hbreadcrumb breadcrumb">
                    <li>
                        <span>CINDTATA PLS</span>
                    </li>
                    <li class="active">
                        <span>人员关系</span>
                    </li>
                </ol>
            </div>
            <h2 class="font-light m-b-xs">
                个人拓扑关系图
            </h2>
        </div>
    </div>
</div>

<div class="content animate-panel">



    <div class="row">
        <div class="hpanel hgreen">
            <div class="panel-heading">
                <div class="panel-tools">

                    <a class="showhide"><i class="fa fa-chevron-up"></i></a>
                </div>
                个人拓扑关系图
            </div>

            <div class="panel-body no-padding">
                <div id="main_1" class="pull-left" style="width: 100%;height:700px;"></div>
            </div>


        </div>
    </div>
</div>


<asset:javascript src="echarts/echarts-all-3.js" />
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart1 = echarts.init(document.getElementById('main_1'));
    var fullName = '${params.id}';
    // 指定图表的配置项和数据
//    var option1 = {
//        tooltip: {
//            trigger: 'item',
//            formatter: '{a} : {b}'
//        },
//        toolbox: {
//            show: true,
//            feature: {}
//        },
//        legend: {
//          bottom:'bottom',
//          data:['家人','公司']
//        },
//        series: [
//          {
//           type:'graph',
//           name : "人物关系",
//           ribbonType: false,
//           layout: 'force',
//           force: {
//             repulsion: 1500,
//             layoutAnimation: false
//           },
//           categories : [
//               {
//                   name: '人物'
//               },
//               {
//                   name: '家人'
//               },
//               {
//                   name:'公司'
//               }
//           ],
//           itemStyle: {
//               normal: {
//                   label: {
//                       show: true,
//                       textStyle: {
//                           color: '#333'
//                       }
//                   },
//                   nodeStyle : {
//                       brushType : 'both',
//                       borderColor : 'rgba(255,215,0,0.4)',
//                       borderWidth : 1
//                   },
//                   linkStyle: {
//                       type: 'curve'
//                   }
//               },
//               emphasis: {
//                   label: {
//                       show: false
//                       // textStyle: null      // 默认使用全局文本样式，详见TEXTSTYLE
//                   },
//                   nodeStyle : {
//                       //r: 30
//                   },
//                   linkStyle : {}
//               }
//           },
//           useWorker: false,
//           minRadius : 15,
//           maxRadius : 25,
//           gravity: 1.1,
//           scaling: 1.1,
//           roam: 'move',
//           nodes:[
//               {category:0, name: '主借款人'+fullName, value : 10, label: '主借款人'+fullName+'\n（主要）',symbolSize:60},
//               {category:1, name: '马克',value : 2,symbolSize:60},
//               {category:1, name: '张飞',value : 3,symbolSize:60},
//               {category:1, name: '梦琪',value : 3,symbolSize:60},
//               {category:1, name: '刘磊',value : 7,symbolSize:60},
//               {category:2, name: '企业1',value : 5,symbolSize:60},
//               {category:2, name: '企业2',value : 8,symbolSize:60},
//               {category:2, name: '企业3',value : 9,symbolSize:60},
//               {category:2, name: '企业4',value : 4,symbolSize:60},
//               {category:2, name: '企业5',value : 4,symbolSize:60},
//               {category:2, name: '企业6',value : 1,symbolSize:60},
//           ],
//           links : [
//               {source : '马克', target : '主借款人'+fullName, weight : 1, name: '女儿'},
//               {source : '张飞', target : '主借款人'+fullName, weight : 2, name: '父亲'},
//               {source : '梦琪', target : '主借款人'+fullName, weight : 1, name: '母亲'},
//               {source : '刘磊', target : '主借款人'+fullName, weight : 2},
//               {source : '企业1', target : '主借款人'+fullName, weight : 3, name: '合伙人'},
//               {source : '企业2', target : '主借款人'+fullName, weight : 1},
//               {source : '企业3', target : '主借款人'+fullName, weight : 6, name: '竞争对手'},
//               {source : '企业4', target : '主借款人'+fullName, weight : 1, name: '爱将'},
//               {source : '企业5', target : '主借款人'+fullName, weight : 1},
//               {source : '企业6', target : '主借款人'+fullName, weight : 1},
//               {source : '梦琪', target : '张飞', weight : 1},
//               {source : '企业2', target : '张飞', weight : 1},
//               {source : '企业2', target : '梦琪', weight : 1},
//               {source : '企业2', target : '刘磊', weight : 1},
//               {source : '企业2', target : '企业1', weight : 1},
//               {source : '企业3', target : '企业2', weight : 6},
//               {source : '企业3', target : '梦琪', weight : 1},
//               {source : '企业5', target : '企业2', weight : 1}
//           ]
//       }
//     ]
//    };
    var option1 = {
        backgroundColor: '#fff',
        title: {
//            text: 'Graph 简单示例'
        },
        tooltip: {},
        animationDurationUpdate: 1500,
        animationEasingUpdate: 'quinticInOut',
//        color:['#83e0ff','#45f5ce','#b158ff'],
        legend: {
            show: true,
//            data: [
//                {name: '人',textStyle:{color:'#62cb31'} },
//                {name: '物证',textStyle:{color:'#62cb31'}},
//                {name: '不明物体',textStyle:{color:'#62cb31'}}
//            ]
        },
        series: [
            {
                type: 'graph',
                layout: 'force',
                force:{
                    repulsion:1000,
                    edgeLength:50
                },
                symbolSize: 50,
//                是否开启鼠标缩放和平移漫游。默认不开启。如果只想要开启缩放或者平移，可以设置成 'scale' 或者 'move'。设置成 true 为都开启
                roam: true,
                label: {
                    normal: {
                        show: true
                    }
                },
                edgeSymbolSize: [4, 10],
                edgeLabel: {
                    normal: {
                        show:true,
                        textStyle: {
                            fontSize: 13
                        },
                        formatter: "{c}"
                    }
                },

                data: [
                    {
                        name: '主借款人',
                        symbolSize: 100,
                        draggable: true,
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#e67e22',
                            }
                        }
                    },
                    {
                        name: '企业A',
                        symbolSize: 70,
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#3498db',
                            }
                        },

                    },
                    {
                        name: '企业B',
                        symbolSize: 70,
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#3498db',
                            }
                        },

                    },
                    {
                        name: '企业C',
                        symbolSize: 70,
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#3498db',
                            }
                        },

                    },
                    {
                        name: '企业D',
                        symbolSize: 70,
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#3498db',
                            }
                        },

                    },
                    {
                        name: '王五',
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#62cb31'
                            }
                        },

                    },
                    {
                        name: '王五1',
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#62cb31'
                            }
                        },

                    },
                    {
                        name: '赵五',
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#62cb31'
                            }
                        },

                    },
                    {
                        name: '赵五1',
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#62cb31'
                            }
                        },

                    },
                    {
                        name: '李四',
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#62cb31'
                            }
                        },

                    },
                    {
                        name: '赵六',
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#62cb31'
                            }
                        },

                    },
                    {
                        name: '赵六1',
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#62cb31'
                            }
                        },

                    },
                    {
                        name: '郑五',
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#62cb31'
                            }
                        },

                    },
                    {
                        name: '张三',
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#62cb31'
                            }
                        },

                    },
                    {
                        name: '张三1',
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#62cb31'
                            }
                        },

                    },
                    {

                        name: '刘大',
                        itemStyle: {
                            normal: {
                                borderWidth: 1,
                                color: '#62cb31'
                            }
                        },

                    }],

                links: [
                    {
                        source: '主借款人',
                        target: '企业A',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#3498db' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        source: '主借款人',
                        target: '企业B',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#3498db' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        source: '主借款人',
                        target: '企业C',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#3498db' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },

                    {
                        source: '主借款人',
                        target: '企业D',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#3498db' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        source: '赵五',
                        target: '赵五1',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        source: '张三1',
                        target: '郑五',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        source: '赵六',
                        target: '赵六1',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        source: '张三',
                        target: '李四',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        source: '企业C',
                        target: '赵五',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        source: '企业D',
                        target: '赵六',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        source: '赵五',
                        target: '赵六',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        source: '主借款人',
                        target: '企业E',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        }
                    },
                    {
                        source: '企业A',
                        target: '王五',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                    },
                    {
                        source: '企业A',
                        target: '王五1',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                    },
                    {
                        source: '王五',
                        target: '刘大',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                    },
                    {
                        source: '王五1',
                        target: '张三',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                    },
                    {
                        source: '企业B',
                        target: '张三',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                    },
                    {
                        source: '企业B',
                        target: '张三1',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#62cb31' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                    },
                    {
                        source: '企业A',
                        target: '企业B',
                        value: '',
                        lineStyle: {
                            normal: {
                                color: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [{
                                        offset: 1, color: '#3498db' // 100% 处的颜色
                                    }],
                                    globalCoord: false // 缺省为 false
                                }
                            }
                        },
                    }
                ],
                lineStyle: {
                    normal: {
                        opacity: 0.9,
                        width: 2,
                        curveness: 0
                    }
                },
//              节点分类的类目，可选。
//              如果节点有分类的话可以通过 data[i].category 指定每个节点的类目，类目的样式会被应用到节点样式上。图例也可以基于categories名字展现和筛选。
                categories:[
                    {name: '人'},
                    {name: '物证'},
                    {name: '不明物体'}
                ]
            }
        ]
    }
        myChart1.setOption(option1);
</script>

</body>
</html>
